<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>

    <style>
        label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 10px;
        }

        input {
            width: 250px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .btn {
            width: 150px;
        }

        .tip {
            color: #ff0000;
            font-size: 12px;
        }
    </style>
    <script type="module" src="js/check.js"></script>

</head>
<body>
<div>
    <h1>用户注册</h1>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名不能为空且长度在4-16个字符">
        <span class="tip" id="name_msg"></span> <br>

        <label for="phone">手机号：</label>
        <input type="text" id="phone" name="phone" placeholder="手机号不能为空且长度为11位">
        <span class="tip" id="phone_msg"></span>
        <br>

        <input type="submit" value="提交" class="btn">
        <input type="reset" value="重置" class="btn">
    </form>
</div>

<!-- 模块化JS引入方式，需要指定type="module" -->
<!--<script type="module" src="./js/check.js"></script>-->
</body>
</html>